<script setup>
	import {
		ref,
		getCurrentInstance,
		computed,
		onMounted,
		reactive,
		toRefs,
	} from 'vue'
	import { Search } from '@element-plus/icons-vue'
	import { useStore } from 'vuex'
	import { useRoute, useRouter } from 'vue-router'

	const store = useStore()
	const router = useRouter()
	const { proxy } = getCurrentInstance()
	const type = router.currentRoute.value.meta.type

	const ulist = reactive(store.state.pageStore.leftbarlist)

	const leftbarColor = ref('#fcfbf2')
</script>

<template>
	<div class="leftbar">
		<div class="leftbar-list">
			<ul>
				<li
					:class="['uli', type == index ? 'selected-box' : '']"
					@click="router.push(li.lroute)"
					v-for="(li, index) in ulist"
				>
					<div :class="type == index ? 'selected' : ''">
						{{ li.category }}
					</div>
					<div :class="['category-english', type == index ? 'selected' : '']">
						{{ li.eng }}
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<style lang="less">
	a {
		text-decoration: none; /* 去除默认的下划线 */
		outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
	}
	a:visited {
		text-decoration: none;
		color: v-bind(leftbarColor);
	}
	a:link {
		color: v-bind(leftbarColor);
	}

	// 选中样式
	.selected {
		color: rgb(0, 0, 0) !important;
	}
	.selected-box {
		border: 2px solid white !important;
	}
	// 侧栏
	.leftbar {
		height: 100%;
		width: 12%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(
			to bottom right,
			rgb(194, 234, 255),
			rgb(70, 151, 244)
		);
		// box-shadow: 0 0 10px 0 #000;
		.leftbar-list {
			height: 50%;
			> ul {
				height: 100%;
				width: 100%;
				> li {
					list-style: none;
					display: flex;
					height: 80px;
					padding: 10px;
					align-items: center;
					flex-direction: column;
					margin-top: 10px;
					border-radius: 5px;
					border: 2px solid transparent;
					> div {
						transition: all 0.3s;
					}
					> div:nth-child(1) {
						font-size: 25px;
						font-weight: lighter;
						color: v-bind(leftbarColor);
					}
					> div:nth-child(2) {
						color: rgb(234, 232, 232);
						margin-top: 5px;
						font-size: 15px;
					}
				}
				> li:hover {
					border: 2px solid white;
					cursor: pointer;
					transition: 0.5s ease-out;
				}
			}
		}
	}
</style>
